<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<head>
	<title>登录页面</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/global.css" />
	<link rel="stylesheet" href="/resources/css/login.css" />
</head>
<body class="beg-login-bg">
	<div class="beg-login-box">
			<header>
				<h1>后台登录</h1>
			</header>
			<div class="beg-login-main">
				<form action="/user/login" class="layui-form" method="post">
					<div class="layui-form-item">
						<label class="beg-login-icon">
                        <i class="layui-icon">&#xe612;</i>
                    </label>
						<input id="username" type="text" name="username" lay-verify="userName" autocomplete="off" placeholder="这里输入登录名" class="layui-input">
					</div>
					<div class="layui-form-item">
						<label class="beg-login-icon">
                        <i class="layui-icon">&#xe642;</i>
                    </label>
						<input type="password" id="password" name="password" lay-verify="password" autocomplete="off" placeholder="这里输入密码" class="layui-input">
					</div>
					<div class="layui-form-item">
						<div class="beg-login-remember">
							<label>记住帐号？</label>
							<input type="checkbox" name="rememberMe" value="true" lay-skin="switch" checked title="记住帐号">
							<span style="color: red" id="msg"></span>
						</div>
						<div class="beg-pull-right">
							<button type="button" id="btnLogin" class="layui-btn" lay-submit lay-filter="login">
                            <i class="layui-icon">&#xe650;</i> 登录
                        </button>
						</div>
						<div class="beg-pull-left">
							<button type="button" id="btnRes" class="layui-btn" lay-submit lay-filter="res">
                            <i class="layui-icon">&#xe650;</i> 注册
                        </button>
						</div>
						<div class="beg-clear"></div>
					</div>
				</form>
			</div>
			<footer>
				<p>608 SuperMarket 有限公司 © </p>
			</footer>
		</div>
		
		
		<script type="text/html" id="addUserTemplate">
		  <form class="layui-form" action="" style="padding: 20px" lay-filter="userForm">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" autocomplete="off" class="layui-input">
                </div>
            </div>
			<div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" autocomplete="off" class="layui-input">
             		</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男" checked>
                    <input type="radio" name="sex" value="2" title="女">
                </div>
            </div>
			
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
					<input id="saveBtn" type="button" value="保存" class="layui-btn">
                </div>
            </div>
        </form>
	</script>
		
		
		
		<script type="text/javascript" src="/plugins/layui/layui.js"></script>
		<script type="text/javascript">
			
			//layui.use
		
			layui.use(['form','layer'],function(){
				var form = layui.form;
				var layer = layui.layer;
				var $ = layui.jquery;
				
				$("#btnRes").on("click",function(){
					
					layer.open({
						type:1
						,area:['400px','500px']//窗口大小
						,title:"用户注册"
						,content:$("#addUserTemplate").html()
					});
					form.render();
					
					$("#saveBtn").on("click",function(){	
						//获取form的全部数据
						var data = form.val("userForm");
						console.log(data);
						//把数据推送道后台
						//ajax
						$.post("/user/register",data,function(msg){
							layer.closeAll();

							layer.msg(msg)

						});
					
				});
					
				});
	
				
				$("#btnLogin").on("click",function(){
					var username = $("#username").val();
					console.log(username);
					if(username == null || username == '' || username == undefined){
						layer.alert("用户名不能为空");
						return false;
					}
					
					$.post("/user/login",{username:username,password:$("#password").val()},function(result){
						if(result){
							layer.msg("登录成功")
							location.href="/index";
						}else{
							layer.msg("用户名或密码错误");
						}
					});
					
				});
			});
		</script>
<script src="resources/js/jquery.min.js" type="text/javascript"></script>
</body>
</html>